﻿<%@ Page Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="MultiSelectButton.aspx.cs" Inherits="YUIAspNetDemo.Button.MultiSelectButton" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUIAsp.Net Controls : LiveDemo : Button : ListBox Button</title>
    <script type="text/javascript">
       
        function HandleItemClick(sender, args)
        {
            if(!args.yuiitem.cfg.getProperty('checked')) // not checked -> check it
                args.yuiitem.cfg.setProperty('checked', true);
            else // already checked, uncheck it
                args.yuiitem.cfg.setProperty('checked', false);
            
            // you might also want to persist hte value using a input hidden...
        }
    </script>
    
    <style type="text/css">
        /*fix in IE, display drop-down calendar container on top of second button*/
        .yui-overlay {z-index:1; }
        .yuimenu {background-color:white}
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Multi select button</h1>
    
    <p>This sample uses YUIAsp.Net OverlayButton control with menu/split display in order to work as a custom list box, with multiple selection.</p>
    
    <p>It's a successfull replacement for the classic ASP.NET ListBox.</p>
    
    <h1>ListBox using menu button</h1>
    <p>
        <yui:Button ButtonType="Menu" ID="btnMnu" Text="Christmas wishlist" runat="server" OverlayHeight="200" OverlayWidth="300">
            <ButtonMenu runat="server">
                <Items>
                    <yui:MenuItem OnClientClick="HandleItemClick" Text="PC" Checked="true"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="HandleItemClick" Text="Bike"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="HandleItemClick" Text="Car"></yui:MenuItem>
                </Items>
            </ButtonMenu>
        </yui:Button>
        <asp:HiddenField ID="hidMenu" runat="server" />
    </p>
    
    <h1>DropDownList using split button</h1>
    <p>
        <yui:Button ButtonType="Split" ID="btnSplit" Text="Christmas wishlist" runat="server" OverlayHeight="200" OverlayWidth="300">
            <ButtonMenu runat="server">
                <Items>
                    <yui:MenuItem OnClientClick="HandleItemClick" Text="PC"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="HandleItemClick" Text="Bike" Checked="true"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="HandleItemClick" Text="Car"></yui:MenuItem>
                </Items>
            </ButtonMenu>    
        </yui:Button>
        <asp:HiddenField ID="hidSplit" runat="server" />
    </p>
</asp:Content>
